﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Eacademy.Domain.Models.RegisterViewModel>" %>
<%@ Import Namespace="XCaptcha.Web.Mvc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript" src="/content/js/country.js"></script>
    <script type="text/javascript">

        var countryId = $("#CountryId > option:selected").attr("value");

        var validator;

        $(document).ready(function () {

            $('#xcaptcha-refresh').click(function () {
                xcaptchaChangeCaptchaImage();
            });

            $("input[type='text'],input[type='password']", "#register-form").blur(function () {
                if ($("#register-form").validate().element(this) == true) {
                    $(".field-error-msg", $(this).parents("tr")).html("");
                }
            });

            $("#Password").keyup(function () {
                var err = $(".field-error-msg", $(this).parents("tr"));
                var txt = $(this);
                passwordStrength(err, txt);
            });

            validator = $("#register-form").validate({
                errorPlacement: function (error, element) {
                    $(".field-error-msg", $(element).parents("tr")).html(error.text());
                    //$(".textbox-form", $(element).parents("tr")).effect("highlight", {}, 300);
                },
                rules: {
                    UserPrimaryEmail: {
                        required: true,
                        email: true
                    },
                    UserAlternateEmail: {
                        email: true
                    },
                    Password: {
                        required: true,
                        minlength: 6
                    },
                    ConfirmPassword: {
                        required: true,
                        equalTo: "#Password"
                    },
                    Attempt: {
                        required: true
                    },
                    CountryId: { validatecountry: true },
                    StateId: { validatestate: true },
                    ProvinceId: { validateprovince: true }
                },
                onkeyup: false,
                onfocusout: false,
                messages: {
                    UserPrimaryEmail: {
                        required: "Please enter your email",
                        email: "Please enter a valid email"
                    },
                    UserAlternateEmail: {
                        email: "Please enter a valid email"
                    },
                    Password: {
                        minlength: "'Password' must be at least {0} characters long",
                        required: "Please enter a password"
                    },
                    ConfirmPassword: {
                        required: function () {
                            if ($("#Password").val() == "") {
                                return " ";
                            }
                            else {

                                return "Retype password";
                            }
                        },
                        equalTo: "The password and confirmation password does not match"
                    },
                    Attempt: {
                        required: "Please enter the code"
                    },
                    ProvinceId: {
                        validateprovince: function () {
                            if (countryId == COUNTRY.US) {
                                return "Please select a county";
                            }
                            else {
                                return "Please select a province";
                            }
                        }
                    }
                }
            });
        });

        function clearErrors() {
            $(".field-error-msg").html("");
            validator.resetForm();
        }

        function xcaptchaSetCaptchaImage(solutionUrl, imageUrl) {

            $.ajaxSetup({ cache: false });
            $.get(solutionUrl, null, function (data) {
                var src = imageUrl + data;
                $('#-xcaptcha-hidden').val(data);
                $('#xcaptcha-image').attr("src", src);
            });
        }

    </script>
    <%: Html.XCaptcha().Script() %>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="left-head">
        <div class="head-register">
        </div>
        <div class="label-register">
            Create your
            <%= ViewData["usertype"] %>
            profile, Enter your info below:</div>
        <div class="separator">
        </div>
    </div>
    <% using (Html.BeginForm("Register", "Account", new { usertype = ViewData["usertype"] }, FormMethod.Post, new { id = "register-form", autocomplete = "off" }))
       {%>
    <table id="form">
        <tr>
            <td class="label">
                <%: Html.LabelFor(model => model.UserPrimaryEmail)%>
            </td>
            <td class="field">
                <div class="textbox-form">
                    <%: Html.TextBoxFor(model => model.UserPrimaryEmail, new { @class = "textbox-field" })%>
                </div>
            </td>
            <td class="field-error">
                <div class="field-error-msg">
                    <%: Html.ValidationMessageFor(model => model.UserPrimaryEmail)%>
                </div>
            </td>
        </tr>
        <tr>
            <td class="label">
                <%: Html.LabelFor(model => model.UserAlternateEmail)%>
            </td>
            <td class="field">
                <div class="textbox-form">
                    <%: Html.TextBoxFor(model => model.UserAlternateEmail, new { @class = "textbox-field" })%>
                </div>
            </td>
            <td class="field-error">
                <div class="field-error-msg">
                    <%: Html.ValidationMessageFor(model => model.UserAlternateEmail)%>
                </div>
            </td>
        </tr>
        <tr>
            <td class="label">
                <%: Html.LabelFor(model => model.Password)%>
            </td>
            <td class="field">
                <div class="textbox-form">
                    <%: Html.PasswordFor(model => model.Password, new { @class = "textbox-field" })%>
                </div>
            </td>
            <td class="field-error">
                <div class="field-error-msg">
                    <%: Html.ValidationMessageFor(model => model.Password)%>
                </div>
            </td>
        </tr>
        <tr>
            <td class="label">
                <%: Html.LabelFor(model => model.ConfirmPassword)%>
            </td>
            <td class="field">
                <div class="textbox-form">
                    <%: Html.PasswordFor(model => model.ConfirmPassword, new { @class = "textbox-field" })%>
                </div>
            </td>
            <td class="field-error">
                <div class="field-error-msg">
                    <%: Html.ValidationMessageFor(model => model.ConfirmPassword)%>
                </div>
            </td>
        </tr>
        <tr>
            <td class="label">
                <%: Html.LabelFor(model => model.CityName)%>
            </td>
            <td class="field">
                <div class="textbox-form">
                    <%: Html.TextBoxFor(model => model.CityName, new { @class = "textbox-field" })%>
                </div>
            </td>
            <td class="field-error">
                <div class="field-error-msg">
                    <%: Html.ValidationMessageFor(model => model.CityName)%>
                </div>
            </td>
        </tr>
        <tr>
            <td class="label">
            </td>
            <td class="field">
                <span class="tip">Please type the characters you see in the image.</span>
                <%: Html.XCaptcha().Image(model => model.EncryptedSolution) %>
                <br />
                <div class="textbox-form">
                    <%=Html.TextBoxFor(model => model.Attempt, new { @class = "textbox-field" })%>
                </div>
            </td>
            <td class="field-error">
                <div class="field-error-msg">
                    <%=Html.ValidationMessageFor(model => model.Attempt)%>
                </div>
            </td>
        </tr>
        <tr>
            <td class="label">
            </td>
            <td class="field">
                <input id="register-btn" type="submit" value="Register" onclick="clearErrors();" class="button-style"/>
            </td>
            <td class="field-error">
            </td>
        </tr>
    </table>
    <%: Html.AntiForgeryToken() %>
    <% } %>
</asp:Content>
